<script setup>
import { ref } from 'vue'
import { getMyRegistrationRecordsService, deleteRegistrationService } from '@/api/registration'
import { formatISOTime } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
const totalCount = ref(0)
const pagination = ref({
  page: 1,
  pageSize: 10
})

const getMyRegistrationRecords = async () => {
  const { data } = await getMyRegistrationRecordsService(pagination.value)
  console.log(data.records)
  tableData.value = data.records.map((item) => ({
    ...item,
    registrationTime: formatISOTime(item.registrationTime),
    startTime: formatISOTime(item.startTime),
    endTime: formatISOTime(item.endTime),
    status: getActivityStatus(item.startTime, item.endTime)
  }))
  totalCount.value = data.total
}

const getActivityStatus = (start, end) => {
  const now = new Date()
  const startTime = new Date(start)
  const endTime = new Date(end)
  if (now < startTime) return '未开始'
  if (now > endTime) return '已结束'
  return '进行中'
}

const handlePageChange = (page) => {
  pagination.value.page = page
  getMyRegistrationRecords()
}

getMyRegistrationRecords()

const jumpToEventDetail = (row) => {
  console.log('查看活动详情', row)
  // 使用 window.open 方法在新窗口打开页面
  window.open(`/alumni-event/${row.eventId}`, '_blank')
}

const cancelRegistration = async (row) => {
  try {
    await ElMessageBox.confirm('确定要取消该活动的报名吗？', '取消报名确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    })
    const { data } = await deleteRegistrationService(row.registrationId)
    ElMessage.success(data)
    getMyRegistrationRecords()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('取消报名失败: ' + (error.message || error))
    }
  }
}
</script>

<template>
  <div class="registration-container">
    <h1 class="page-title">我的报名</h1>
    <div class="total-count">总计已报名活动数：{{ totalCount }}</div>

    <el-table :data="tableData" border>
      <el-table-column prop="eventName" label="活动标题" width="180" align="center">
        <template #default="{ row }">
          <span class="event_title" @click="jumpToEventDetail(row)">{{ row.eventName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="封面图片" width="150" align="center">
        <template #default="{ row }">
          <img :src="row.coverImageUrl" class="cover-image" alt="封面" />
        </template>
      </el-table-column>

      <el-table-column prop="registrationTime" label="报名时间" align="center" />
      <el-table-column prop="startTime" label="开始时间" align="center" />
      <el-table-column prop="endTime" label="结束时间" align="center" />

      <el-table-column label="活动状态" align="center">
        <template #default="{ row }">
          <el-tag
            :type="
              {
                已结束: 'info',
                进行中: 'success',
                未开始: 'warning'
              }[row.status]
            "
          >
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="联系电话" align="center" />

      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button
            type="danger"
            @click="cancelRegistration(row)"
            size="small"
            :disabled="row.status !== '未开始'"
            >取消报名</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pagination.pageSize"
        :total="totalCount"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.registration-container {
  padding: 20px;
  background: #fff;

  .page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }

  .total-count {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
  }

  .event_title {
    color: #61666d;

    &:hover {
      color: #409eff; // 悬停时变为蓝色
      text-decoration: underline; // 添加下划线
      cursor: pointer; // 鼠标变为手型
    }
  }

  .cover-image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
  }

  .pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  :deep(.el-table__cell) {
    text-align: center;
  }
}
</style>
